import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
import {
  getBanners,
  getHotReccomend,
  getNewAlbum,
  getPlayListDetail,
  getArtistList
} from '../service/recommend'

// 发送网络请求，存储到store中
// 写法1、
// // 获取轮播图
// export const fetchBannerDataAction = createAsyncThunk(
//   'banners',
//   async (arg, { dispatch }) => {
//     const res = await getBanners()
//     // return res.banners
//     dispatch(changeBannersAction(res.banners))
//   }
// )

// // 获取热门推荐数据
// export const fetchRecommendDataAction = createAsyncThunk(
//   'hotRecommend',
//   async (arg, { dispatch }) => {
//     const res = await getHotReccomend(8)
//     // return res.banners
//     dispatch(changeHotRecommendAction(res.result))
//   }
// )

// // 获取新碟上架数据
// export const fetchNewAlbgumAction = createAsyncThunk(
//   'newAlbum',
//   async (arg, { dispatch }) => {
//     const res = await getNewAlbum()
//     // return res.banners
//     dispatch(changeNewAlbumAction(res.albums))
//   }
// )

// 写法2、一次调用，发送三次请求，三次请求都是异步的，不会互相等待
export const fetchRecommendDataAction = createAsyncThunk(
  'fetchdata',
  (arg, { dispatch }) => {
    // 1、获取轮播图
    getBanners().then((res) => {
      dispatch(changeBannersAction(res.banners))
    })
    // 2、获取热门推荐
    getHotReccomend(8).then((res) => {
      dispatch(changeHotRecommendAction(res.result))
    })
    // 3、获取新碟上架
    getNewAlbum().then((res) => {
      dispatch(changeNewAlbumAction(res.albums))
    })
    // 4、获取歌手数据
    getArtistList(5).then((res) => {
      dispatch(changeSettleSingersAction(res.artists))
    })
  }
)

// 获取三个榜单的数据
const rankingIds = [19723756, 3779629, 2884035]
export const fetchRankingDataAction = createAsyncThunk(
  'rankingData',
  (_, { dispatch }) => {
    // 1. 获取榜单数据
    // 2. 将三个榜单数据的结果都拿到，统一放到一个数组中管理
    const promises: Promise<any>[] = []
    for (const id of rankingIds) {
      promises.push(getPlayListDetail(id))
    }
    // 3. 等待三个请求都响应完毕，再做处理（得到的三个榜单的数据可能是无序的，因为响应回来的速度不一样！我们这样处理可以让返回的结果顺序保存！）
    // 三次请求是同时发送的，但是得到的结果我们可以这样设置得到三次请求保证顺序下的结果
    Promise.all(promises).then((res) => {
      const palylists = res
        .filter((item) => item.playlist)
        .map((item) => item.playlist)

      dispatch(changeRankingsAction(palylists))
    })
  }
)

interface IRecommendState {
  banners: any[]
  hotRecommends: any[]
  newAlbum: any[]
  rankings: any[]
  settleSingers: any[]
}

const initialState: IRecommendState = {
  banners: [],
  hotRecommends: [],
  newAlbum: [],
  rankings: [],
  settleSingers: []
}

const recommendSlice = createSlice({
  name: 'recommend',
  initialState,
  reducers: {
    changeBannersAction(state, action) {
      state.banners = action.payload
    },
    changeHotRecommendAction(state, action) {
      state.hotRecommends = action.payload
    },
    changeNewAlbumAction(state, action) {
      state.newAlbum = action.payload
    },
    changeRankingsAction(state, action) {
      state.rankings = action.payload
    },
    changeSettleSingersAction(state, action) {
      state.settleSingers = action.payload
    }
  }
})

export const {
  changeBannersAction,
  changeHotRecommendAction,
  changeNewAlbumAction,
  changeRankingsAction,
  changeSettleSingersAction
} = recommendSlice.actions

export default recommendSlice.reducer
